<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				height:100px;
				width:100px;
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		事件句柄
		<div id="box"></div>
		<button id="btn">双击</button>
		<script>
			//鼠标事件
			// 点击 click
			// 双击 dblclick
			// 右键单击 contextmenu
			// mouseover 移入  mouseout 移出   有冒泡
			// mouseenter 移入  mouseleave 移出  没有冒泡
			// mousemove  移动触发
			// mousedown  移入，鼠标按下  mouseup  移入，鼠标抬起
			
			box.onmousedown=function(e){
				console.log("移入，鼠标按下");
			}
			
			box.onmouseup=function(){
				console.log("移入，鼠标抬起");
			}
			
			
			// box.onmousemove=function(){
			// 	console.log("移动反复触发");
			// }
            
			
			// btn.ondblclick=function(){
			// 	console.log("双击");
			// }
			
			//菜单栏
			// btn.oncontextmenu=function(){
			// 	console.log("右键单击");
			// }
			
			// btn.onmouseover=function(){
			// 	console.log("鼠标移入");
			// }
			// btn.onmouseout=function(){
			// 	console.log("鼠标移出");
			// }
			
			// btn.onmouseenter=function(){
			// 	console.log("鼠标移入");
			// }
			// btn.onmouseleave=function(){
			// 	console.log("鼠标移出");
			// }
		</script>
	</body>
</html>
